
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<link href="../css/main.css" type="text/css" rel="stylesheet" />
		<link href="../css/dialog.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="../datePicker/WdatePicker.js"></script>
		<title></title>
		
	</head>
	<body>
		<div class="main_frame">
			<div class="position_div"> 
				<img src="../images/position_icon.png" />
				<i>设备管理</i><i>&gt;&gt;</i><i>设备列表管理</i>
			</div>
			<div class="right_div">
				<div class="search_div">					
					
					<div class="label_div">
						<label class="text_label">设备名称：</label>
						<input type="text" class="input_search" placeholder="" id="qry_name" />
					</div>
					<div class="label_div">
						<label class="text_label">通讯设备序列号：</label>
						<input type="text" class="input_search" placeholder="" id="qry_comm_serial_number" />
					</div>
					<div class="label_div">
						<label class="text_label">设备序列号：</label>
						<input type="text" class="input_search"  id="qry_serial_number" />
					</div>
					<div class="label_div">
						<label class="text_label">设备模板：</label>
						<div class="drop_frame">
							<i class="text_i" data-status="0" >请选择</i>
							<input type="hidden" id="qry_model" value="0">
							<span class="span_arrow"></span>
							<ul class="choose_ul qrytype_html">
							</ul>
						</div>
						
					</div>
					<div class="label_div">
						<label class="text_label">在线状态：</label>
					    <div class="drop_frame">
							<i class="text_i" data-status="0" >请选择</i>
							<input type="hidden" id="qry_status" value="0">
							<span class="span_arrow"></span>
							<ul class="choose_ul ">
							<li><a href="javascript:void(0)" class="choose_a" data-status="0">所有</a></li>
							<li><a href="javascript:void(0)" class="choose_a" data-status="1">在线</a></li>
							<li><a href="javascript:void(0)" class="choose_a" data-status="2">离线</a></li>
							</ul>
						</div>
					</div>
					
					<div class="done_div">
						<button class="btn_common1 title_div2"  onclick="qryItemListBtn()">
							<i></i>搜索
						</button>
						<button style="margin-left:10px !important" class="btn_common2 newadd"   onclick="toAddForm()">
							<i></i>新增
						</button>
					</div>
                    <div class="cl">&nbsp;</div>
				</div>
				<table class="table_list">
					<tr>
						<th width="5%">序号</th>
						<th width="12%">设备名称</th>
						<th width="12%">设备序列号</th>
						<th width="12%">设备模板</th>
						<th width="12%">订单编号</th>
						<th width="10%">通讯设备</th>
						<th width="8%">通讯设备序列号</th>
						<th width="8%">客户</th>
						<th width="8%">激活状态</th>
						<th class="last_td">操作</th>
					</tr>
					<tbody id="listbox1">
					</tbody>
				</table>
				<div class="turn_page" style="display:none">
				   <div class="main_page" id="pageCon">
					   <a href="javascript:void(0)" class="first_a" id="firstPage"></a>
					   <a href="javascript:void(0)" class="up_a" id="prev"></a>    	
					   <a href="javascript:void(0)" class="next_a" id="next"></a>
					   <a href="javascript:void(0)" class="last_a" id="lastPage"></a>
					   <input id="page_num_input" style="width:40px;" type="text" onblur="checkValue(this);" onkeyup="value=value.replace(/\D/g,'')"/>
					   <button type="button" class="num_input" id="go_num_input">跳转</button>
					   <b class="page_text">当前<i><em id="nowpage"></em>/<em id="totalpage"></em></i>页，总数<i id="totalNum"></i>条</b>    	
				   </div>
				</div>
				
				
				
				
				<div class="opacity_div" style="display: none;"></div>
				<div class="bookDetail" style="display: none;top:50px;">
					<div class="prop_top">
						<i>新增设备</i>
						<a href="javascript:void(0)" class="close_icon"><img src="../images/close_icon.png"></a>
					</div>
					<div class="bookdetail_box">
					<form action="" id="form">
					<div class="blank_div"></div>
					<div class="blank_div"></div>
					
					<label class="text_label label_width">&nbsp;&nbsp;</label>
					<input type="radio" name="info_type" value="1" checked="checked"/> 基本信息 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="info_type" value="2"/> 设备定位
						
						<input type="hidden" class="input_search width_input" name="id" value="0"/>
						 <div class="base_info">
						<div class="blank_div"></div>
						<label class="text_label label_width">设备名称：</label>
					    <input type="text" class="input_search width_input notNull" name="name" />
					    &nbsp;&nbsp;<span style="color: red">* </span>				    
						
						<div class="blank_div"></div>
						<label class="text_label label_width">设备模板：</label>
						<div class="drop_frame">
								<i class="text_i notNull" data-status="0" >请选择</i>
								<span class="span_arrow"></span>
								<input type="hidden" name="modelId" >
								<ul class="choose_ul type_html"></ul>
						</div>					
						
						
						
						<div class="blank_div"></div>					    
						<label class="text_label label_width">通讯设备：</label>
						<div class="drop_frame">
							<i class="text_i" data-status="0"  >请选择</i>
							<span class="span_arrow"></span>
							<input type="hidden" name="commType" >
							<ul class="choose_ul">
								<li><a href="javascript:void(0)" class="choose_a" data-status="1">FBOX</a></li>
								<li><a href="javascript:void(0)" class="choose_a" data-status="2">蓝牙</a></li>
								<li><a href="javascript:void(0)" class="choose_a" data-status="3">其他</a></li>
							</ul>
						</div>
					    <div class="blank_div"></div>
					    <label class="text_label label_width">设备序列号：</label>
					    <input type="text" class="input_search width_input notNull" name="serialNumber" />
					    &nbsp;&nbsp;<span style="color: red">* </span>
					    
					    <div class="blank_div"></div>
					    <label class="text_label label_width">通讯设备序列号：</label>
					    <input type="text" class="input_search width_input " name="commSerialNumber" />
					    &nbsp;&nbsp;<span style="color: red">* </span>					    
					    
					    <div class="blank_div"></div>
					    <label class="text_label label_width">订单编号：</label>
					    <input type="text" class="input_search width_input notNull" name="orderNo" />
					    &nbsp;&nbsp;<span style="color: red">* </span>
					    
					    <div class="blank_div"></div>				  				    
						<label class="text_label label_width">当前状态：</label>
						<div class="drop_frame">
							<i class="text_i" data-status="0"  >请选择</i>
							<span class="span_arrow"></span>
							<input type="hidden" name="status" >
							<ul class="choose_ul">
								<li><a href="javascript:void(0)" class="choose_a" data-status="1">库存</a></li>
								<li><a href="javascript:void(0)" class="choose_a" data-status="2">已出库</a></li>
								<li><a href="javascript:void(0)" class="choose_a" data-status="3">待安装</a></li>
								<li><a href="javascript:void(0)" class="choose_a" data-status="4">已安装</a></li>
								<li><a href="javascript:void(0)" class="choose_a" data-status="5">待测试</a></li>
								<li><a href="javascript:void(0)" class="choose_a" data-status="6">停用</a></li>
								<li><a href="javascript:void(0)" class="choose_a" data-status="7">设备故障</a></li>
							</ul>
						</div>
					    <div class="blank_div"></div>
					    <label class="text_label label_width">备注：</label>
					    <input type="text" class="input_search width_input " name="mark" />
					   </div>
					   
						<div class="address_info" >
							<!-- <div class="blank_div"></div>
							<label class="text_label label_width">&nbsp;&nbsp;</label>
							<input type="radio" name="inf_type" value="1" checked="checked"/>启用地图定位 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="inf_type" value="2"/> 关闭地图定位
							<div class="blank_div"></div> -->
							<div id="container" class="allmap_test" style="height: 400px;width: 550px;left: 25px;"></div>
						
						<div class="blank_div"></div>
					    <label class="text_label label_width">经度：</label>
					    <input type="text" class="input_search width_input address_longitude" name="longitude"  readonly="readonly"/>
					
						<div class="blank_div"></div>
					    <label class="text_label label_width"> 纬度：</label>
					    <input type="text" class="input_search width_input address_latitude" name="latitude"  readonly="readonly"/>
						
					
						<div class="blank_div"></div>
					    <label class="text_label label_width">地址：</label>
					    <input type="text" class="input_search width_input " name="address" />
						</div>
						
					</form>
					<div class="blank_div"></div>
					<div class="blank_div"></div>
					<div class="bottom_donebtn width_div">
						<button class="btn_common2"  onclick="itemFormSubmit()">提交</button>
						<button class="btn_common1" onclick="edit_cancel()">取消</button>	
					</div>
					
					<div class="blank_div"></div>
					</div>
				</div>
				
				
			
			
				
				
				
			</div>
		</div>
		<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/dialog.js"></script>
		<script type="text/javascript" src="../js/jquery-data.js"></script>
		<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=6a8c6407384cecce12aef8f55109e024"></script>
		<script type="text/javascript" src="../js/map.js"></script>
		<script type="text/javascript">
			var yema=1;
			var pagelen=10;
			var totalPage=0;   
			function qryList(){		
				qryItemList();
			}
			var commType_map ={1:"FBox",2:"蓝牙",3:"其他"}
			$(document).ready(function(){
				getDictionaryList();
				getModelList();
				qryList();
			});
			

			map.on('click', function(e) {
				$(".address_longitude").val(e.lnglat.getLng());
				$(".address_latitude").val(e.lnglat.getLat());
				map.clearMap();
				getAddressDetail(e.lnglat.getLat(),e.lnglat.getLng());
				var lnglatXY=[e.lnglat.getLng(),e.lnglat.getLat()];
				var marker_obj = new AMap.Marker({  //加点
			            map: map,
			            title:e.lnglat.getLng() +","+e.lnglat.getLat()
			            //position: lnglatXY
			        });
				marker_obj.setPosition(lnglatXY);
				
			});
			function showMapMark(){
			    var lng  = $("input[name='longitude']").val();
			    var lat  = $("input[name='latitude']").val();
			    map.clearMap();
			    var lnglatXY=[lng,lat];
			        var marker_obj = new AMap.Marker({  //加点
			                map: map,
			                title:lng +","+lat
			                //position: lnglatXY
			            });
			        marker_obj.setPosition(lnglatXY);
			        map.setCenter(lnglatXY);
			}       
			
			
			function qryList(){
				qryItemList();
			}
			function qryItemListBtn(){
				 yema=1;
				qryItemList();
			}
			function qryItemList(){
				$.ajax({
					url: 'qryDeviceList', 
					type: 'POST',
					data:{name:$("#qry_name").val(),
						modelId:$("#qry_model").val(),
						serialNumber:$("#qry_serial_number").val(),
						commSerialNumber:$("#qry_comm_serial_number").val(),
						//brand:$("#qry_brand").val(),
						yema:yema,length:pagelen},
					async: false,
					dataType: 'json', 
					timeout: 10000, 
					error: function(){LQWarn('请求失败,请稍后重试');}, 
					success: function(result){
						
						if(result.resultCode==1000){
							var items=result.returnObject.pageList;
							if (items && items.length > 0) {
								var rlist="";
								var item ;
								
								$.each(items,function(i){
									item = items[i];
									rlist+='<tr data-status ="'+ item.id+'"><td>'
										+ (i+1+length*(result.returnObject.curPage-1))
										+ '</td><td>' 
										+ item.name
										+ '</td><td>' 
										+ item.serialNumber
										+ '</td><td>' 
										+ replaceNull(item.modelName)
										+ '</td><td>' 
										+ replaceNull(item.orderNo)
										+ '</td><td>' 
										+ commType_map[item.commType]
										+'</td><td>'
										+ replaceNull(item.commSerialNumber)
										+'</td><td>'
										+ replaceNull(item.username)
										+'</td><td>'
										//+ item.status
										+'</td><td class="last_td">'
										+ '<a class="mod" title="修改" href="javascript:void(0);" onclick="toEditForm(this)">修改</a>'
										+ '<a class="del" title="删除" href="javascript:void(0);" onclick="delItem(this)">删除</a>'
										
										+ '</td></tr>';
								});
								$("#listbox1").html(rlist);
								totalPage=result.returnObject.totalPage;
								$("#nowpage").html(result.returnObject.curPage);
								$("#totalpage").html(totalPage);
								$("#totalNum").html(result.returnObject.totalNum);
								$(".turn_page").show();
							}else{
								$("#listbox1").html("");
								$(".turn_page").hide();
							}
						}
						else if(result.resultCode==1004){
							LQWarn(result.returnObject);
							window.top.location.href ="../login.jsp";
						}else{
							LQWarn(result.returnObject);
						}
					}
				});
			}
			
			var url_ = "addDevice.do";
			
			function toAddForm(){
				$(".opacity_div,.bookDetail").show();	
				url_ = "addDevice.do";
				$("#form").clearForm();
				$(":radio").eq(0).click();
			}

			
			function itemFormSubmit(){
			//	console.log($("#form").serialize());
					if($("#form").checkhaveNull()){
					return;
				}
				operateObject(url_,$("#form").serialize(),function(){edit_cancel();});
				//return;
				
			}
			
			
			function toEditForm(obj){
				var id = $(obj).parents("tr").attr("data-status");
				toAddForm();
				url_ = "editDevice.do";
				getObjectWithFillData("getDeviceInfo.do",{"id":id},$("#form"));
				showMapMark();
			}
			
			function delItem(obj){
				
				var id = $(obj).parents("tr").attr("data-status");
				delObject('delDevice.do',{"id":id});
				
				
			}
			
			function edit_cancel(){
				$(".opacity_div,.bookDetail").hide();
			}
			
			function getDictionaryList(){
				
				$.ajax({
					url: '/boilerCloud/dictionary/getDictionaryList.do', 
					type: 'POST',
					async: false,
					traditional:true,
					data:{type:2},
					dataType: 'json', 
					timeout: 10000, 
					error: function(){LQWarn('请求失败,请稍后重试');}, 
					success: function(result){
						if(result.resultCode==1000){
							//console.log(result.returnObject);
							var items = result.returnObject;
							var item;
							var html_items = "";
							
							if(items){
								for(var i=0;i<items.length;i++){
									item = items[i];
									html_items  += '<li><a href="javascript:void(0)" class="choose_a" data-status="'
									+items[i].id+'" >'+ items[i].name+'</a></li>';		
								}
							}
							$(".items").html(html_items);
							$(".qry_items").html('<li><a href="javascript:void(0)" class="choose_a" data-status="0" >全部</a></li>'+html_items);
							
							
							
						}
						else if(result.resultCode==1004){
							LQWarn(result.returnObject);
							window.top.location.href ="../login.jsp";
						}else{
							LQWarn(result.returnObject);
						}
					}
				});	
			}

			function getModelList(){
				//alert($(obj).attr("data-status"));
				$("#typeId").attr("data-status",0).html("请选择")
				$.ajax({
					url: '/boilerCloud/model/getModelList.do', 
					type: 'POST',
					async: false,
					traditional:true,
					dataType: 'json', 
					timeout: 10000, 
					error: function(){LQWarn('请求失败,请稍后重试');}, 
					success: function(result){
						if(result.resultCode==1000){
							//console.log(result.returnObject);
							var items = result.returnObject;
							var item;
							var html_items = "";
							
							if(items){
								for(var i=0;i<items.length;i++){
									item = items[i];
									html_items  += '<li><a href="javascript:void(0)" class="choose_a" data-status="'
									+items[i].id+'">'+ items[i].name+'</a></li>';		
								}
							}
							$(".type_html").html(html_items);
							$(".qrytype_html").html('<li><a href="javascript:void(0)" class="choose_a" data-status="0" >全部</a></li>'+html_items);
							
						}
						else if(result.resultCode==1004){
							LQWarn(result.returnObject);
							window.top.location.href ="../login.jsp";
						}else{
							LQWarn(result.returnObject);
						}
					}
				});	
			}
			
			 $(":radio[name='info_type']").click(function(){
				 console.log($(this).val());
				  if($(this).val() == "1"){
					  $(".address_info").hide();
					  $(".base_info").show();
				  }else{
					  $(".address_info").show();
					  $(".base_info").hide();
				  }
				});
		</script>
	</body>
</html>
